<template>
  <CloudCharts :options="options"></CloudCharts>
</template>
<script lang="ts" setup>
import { getApiNodeWafListApi } from '@/apis/modules/resolve/statistics'
import { useLineCharts } from '@/components/cloud-charts'
import type { Strategies } from '@/types/common'
import { formatChartsUnix, getChartData } from '@/utils'
import dayjs from 'dayjs'
import useTableColumn from '../column'
const { staCodeNumberFormat } = useTableColumn()
interface IProps {
  type: 'custom' | 'rate'
  params: any
  timeDate: any
  siteId: any
  mathRandom: number
}
const props = withDefaults(defineProps<IProps>(), {
  type: 'custom'
})

const time = ref({
  start_time: '',
  end_time: ''
})
const preventData = ref([])
const observeData = ref([])
const times = ref<any[]>([])
const unitData = ref<string>('day')
const dataSource = ref<any[]>([
  {
    label: '',
    data: preventData
  },
  {
    label: '',
    data: observeData
  }
])

const colorsList = ref(['#FDA069', '#FE6E6D'])

const valueNumberFormatters = (val: number | string) => {
  if (val === '-') {
    return '-'
  }
  return (
    staCodeNumberFormat(Number(val)).value +
    staCodeNumberFormat(Number(val)).unit
  )
}

const { options } = useLineCharts({
  categories: times,
  dataSource: dataSource,
  legendPosition: 'tr',
  colors: colorsList.value,
  valueFormatter: valueNumberFormatters,
  labelFormatter: (val) => formatChartsUnix(val, unitData.value)
})

/** 获取流量数据 */
const getCustomData = () => {
  const { start_time, end_time } = time.value

  getApiNodeWafListApi({
    start_time: Number(start_time),
    end_time: Number(end_time),
    node_ids:
      props.params.node_ids.length > 0 ? props.params.node_ids : props.siteId,
    module: 1
  }).then((res) => {
    const {
      seriesData: block_cnt,
      xAxisData,
      unit
    } = getChartData(
      res.list ?? [],
      Number(start_time),
      Number(end_time),
      'block_cnt',
      'time'
    )
    const { seriesData: log_cnt } = getChartData(
      res.list ?? [],
      Number(start_time),
      Number(end_time),
      'log_cnt',
      'time'
    )

    observeData.value = block_cnt
    preventData.value = log_cnt
    times.value = xAxisData
    unitData.value = unit as string
    dataSource.value = [
      {
        label: '观察',
        data: preventData
      },
      {
        label: '阻止',
        data: observeData
      }
    ]
    colorsList.value = ['#FDA069', '#FE6E6D']
  })
}

/**获取带宽数据 */
const getRateData = () => {
  const { start_time, end_time } = time.value
  getApiNodeWafListApi({
    start_time: Number(start_time),
    end_time: Number(end_time),
    node_ids:
      props.params.node_ids.length > 0 ? props.params.node_ids : props.siteId,
    module: 2
  }).then((res) => {
    const {
      seriesData: block_cnt,
      xAxisData,
      unit
    } = getChartData(
      res.list ?? [],
      Number(start_time),
      Number(end_time),
      'block_cnt',
      'time'
    )
    const { seriesData: log_cnt } = getChartData(
      res.list ?? [],
      Number(start_time),
      Number(end_time),
      'log_cnt',
      'time'
    )
    preventData.value = log_cnt
    observeData.value = block_cnt
    times.value = xAxisData
    unitData.value = unit as string
    dataSource.value = [
      {
        label: '观察',
        data: preventData
      },
      {
        label: '阻止',
        data: observeData
      }
    ]
    colorsList.value = ['#FDA069', '#FE6E6D']
  })
}

onMounted(() => {
  timeReset()
})

const timeReset = () => {
  time.value.start_time = String(dayjs(props.timeDate).unix())
  time.value.end_time = String(dayjs(props.timeDate).unix() + 86399)
}
const apiMap: Strategies<() => void> = {
  custom: getCustomData,
  rate: getRateData
}

watch(
  () => props.type,
  () => {
    timeReset()
    if (Object.prototype.hasOwnProperty.call(apiMap, props.type)) {
      apiMap[props.type]()
    }
  }
)

watch(
  () => props.mathRandom,
  () => {
    timeReset()
    if (Object.prototype.hasOwnProperty.call(apiMap, props.type)) {
      apiMap[props.type]()
    }
  }
)
</script>
